import 'package:flutter/material.dart';
import '../model/post.dart';
import 'package:flutter3x/demo/post_show.dart';

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({super.key});

    Widget _listItemBuilder(BuildContext context, int index){
    return Container(
      color: const Color.fromARGB(255, 255, 255, 255),
      margin: const EdgeInsets.all(8.0),
      child: Stack(
        children: [
          Column(
            children: <Widget> [
              AspectRatio(
                aspectRatio: 16/9,
                child: Image.network(posts[index].imageUrl,fit: BoxFit.cover,),
                ),
              const SizedBox(height: 10.0),
              Text(
                posts[index].title,
                style: Theme.of(context).textTheme.titleLarge,
              ),
              Text(
                posts[index].author,
                style: Theme.of(context).textTheme.titleMedium,
              ),
              const SizedBox(height: 10.0,)
            ],
          ),
          // 充满整个父容器的定位小部件
          Positioned.fill(
            // 使用Material设计的材料作为子元素
            child: Material(
              // 设置材料的颜色为半透明的浅灰色
              color: const Color.fromRGBO(223, 223, 223, 0),
              // 在材料内部添加一个 InkWell 小部件以处理触摸反馈
              child: InkWell(
                // 设置水波纹效果的颜色为半透明的白色
                splashColor: Colors.white.withOpacity(0.3),
                // 设置高亮效果的颜色为更淡的白色
                highlightColor: Colors.white.withOpacity(0.1),
                // 定义点击事件的处理函数
                // onTap: () => debugPrint('${posts[index]}'),
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    // 点击时导航到 PostShowDemo 页面，传递 posts 列表中的当前项作为参数
                    builder: (context) => PostShowDemo(posta: posts[index]),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return  ListView.builder(
          itemCount: posts.length,
          itemBuilder: _listItemBuilder,
        );
        
  }
}